/**
 * version 1.0.
 * User: johnny zyc
 * Date: 13-6-27
 * Time: 下午10:36
 * To change this template use File | Settings | File Templates.
 *
 * 自动生成选择弹出box
 *
 * 用法： $('#city_select').areaBox(f);
 * #city_select 触发点击元素
 * f : 回调函数，参数分别是id和name
 *
 *
 */
(function ($) {
	$.fn.areaBox = function (f) {
		var hot_id = 'area_hot';
		var province_id = 'area_province';
		var city_id = 'area_city';
		var district_id = 'area_district';
		var result_id = '';
		var result_name = '';
		fn.generalBox();
		fn.generalHotBlock();
		fn.generalAreaBlock(province_id, '省/直辖市', fn.getRemoteArea(0));
		$('.' + hot_id + '_link').click(function () {
			$('.' + hot_id + '_link').removeClass('btn-link-actived');
			$(this).addClass('btn-link-actived');
			result_id = this.id.substr(hot_id.length);
			result_name = $(this).text();
		});
		$('.' + province_id + '_link').click(function () {
			$('.' + province_id + '_link').removeClass('btn-link-actived');
			$('.' + hot_id + '_link').removeClass('btn-link-actived');
			$(this).addClass('btn-link-actived');
			result_id = this.id.substr(province_id.length);
			result_name = $(this).text();
			fn.generalAreaBlock(city_id, '地级市', fn.getRemoteArea(this.id.substr(province_id.length)));
		});
		$('.' + city_id + '_link').live('click', function () {
			$('.' + hot_id + '_link').removeClass('btn-link-actived');
			$('.' + city_id + '_link').removeClass('btn-link-actived');
			$(this).addClass('btn-link-actived');
			result_id = this.id.substr(city_id.length);
			result_name = $(this).text();
			fn.generalAreaBlock(district_id, '区/县级市', fn.getRemoteArea(this.id.substr(city_id.length)));
		});
		$('.' + district_id + '_link').live('click', function () {
			$('.' + hot_id + '_link').removeClass('btn-link-actived');
			$('.' + district_id + '_link').removeClass('btn-link-actived');
			$(this).addClass('btn-link-actived');
			var _city = "";
			$('#' + city_id).children('a').each(function () {
				if ($(this).hasClass('btn-link-actived')) {
					_city = $(this).text();
				}
			});
			result_id = this.id.substr(district_id.length);
			result_name = _city + " " + $(this).text();
		});

		$('#area_confirm_btn').live('click', function () {
			if (result_id == '' || result_name == '')return;
			f(result_id, result_name);
			fn.closeBox();
		});
		$(this).click(function (e) {
			result_id = "";
			result_name = "";
			$('#' + city_id).remove();
			$('#' + district_id).remove();
			fn.showBox();
			$('.area-select-block').children('a').removeClass('btn-link-actived');
			e.preventDefault();
		})
	}

	var fn = {
		getRemoteArea: function (parent) {
			var temp;
			$.ajax({
				url: '/area/' + parent,
				async: false,
				success: function (data) {
					temp = data.area;
				}
			});
			return temp;
		},
		getHotArea: function () {
			var temp;
			$.ajax({
				url: '/area/hot',
				async: false,
				success: function (data) {
					temp = data.area;
				}
			});
			return temp;
		},
		generalBox: function () {
			var overlay = $("<div id='areaBox_overlay'></div>");
			var panel = $('<div id="areaBox_panel"></div>');
			var close = $('<a class="areaBox_close" href="#"></a>');
			var header = $('<div id="areaBox_header">选择地区</div>');
			header.append(close);
			panel.append($(header));
			panel.append($('<div id="areaBox_content"></div>'));
			var btn_div = $('<div class="confirm-btn-div"></div>');
			var confirm_btn = $('<button class="btn-g green" id="area_confirm_btn">确定</button>');
			btn_div.append(confirm_btn);
			var result = $('<span id="area_select_result"></span>');
			panel.append(result);
			panel.append(btn_div);
			$("body").append(overlay);
			$('body').append(panel);
			$("#areaBox_overlay").click(function () {
				fn.closeBox();
			});

			close.click(function () {
				fn.closeBox();
			});

		},
		generalHotBlock: function () {
			var block = $('<div class="area-select-block"></div>');
			block.attr('id', 'area_hot');
			block.append($('<div class="area-select-title">热门城市</div>'));
			$.each(fn.getHotArea(), function (n, d) {
				var item = $('<a href="javascript:void(0);" class="btn-link"></a>');
				item.addClass("area_hot_link");
				item.attr('id', 'area_hot' + d.id);
				item.html(d.name);
				block.append(item);
			});
			$('#areaBox_content').append(block);
		},
		generalAreaBlock: function (_id, _name, _data) {
			while ($('#' + _id).next('.area-select-block').length > 0) {
				$('#' + _id).next('.area-select-block').remove();
			}
			$('#' + _id).remove();
			var block = $('<div class="area-select-block"></div>');
			block.attr('id', _id);
			block.append($('<div class="area-select-title">' + _name + '</div>'));
			$.each(_data, function (n, d) {
				var item = $('<a href="javascript:void(0);" class="btn-link"></a>');
				item.addClass(_id + "_link");
				item.attr('id', _id + d.id);
				item.html(d.name);
				block.append(item);
			});
			$('#areaBox_content').append(block);
		},
		showBox: function () {
			$('#areaBox_overlay').css({ 'display': 'block', opacity: 0 }).fadeTo(200, 0.5);
			$('#areaBox_panel').css({
				'display': 'block',
				'position': 'fixed',
				'opacity': 0,
				'z-index': 11000,
				'left': 50 + '%',
				'width': '500px',
				'margin-left': "-250px",
				'top': "100px"

			});

			$('#areaBox_panel').fadeTo(200, 1);
		},
		closeBox: function () {
			$("#areaBox_overlay").fadeOut(200);
			$('#areaBox_panel').hide();

		}
	}

})(jQuery);